<template>

	<view class="page" @click.stop="e=>e">2
		<!-- <image  @click.stop="emitsClose" src="@/TUIKit/assets/icon/close.png" mode="widthFix" class="close"></image> -->
		<view   @click.stop="emitsClose"  class="close">
			<text class=".text">×</text>
		</view>
		<view class="userInfo">
			<image :src="URL(info.avatar)" class="image" mode="widthFix"></image>
			<view class="f">
				<text class=".text">
					{{info.username}}的店铺
				</text>
			<!-- 	<text  class=".text">
					已卖出3000件 | 关注9999人
				</text> -->
			</view>
		</view>
		<view class="goods">
			<view class="list" v-for="(item,index) in dataList" :key="index" >
				<image :src="URL(item.image)" class="image" mode="aspectFill"></image> 
				<view class="details">
					<text class="f1">
						{{item.name}}
					</text>
					<view class="f2">
						<text style="font-size: 26rpx;">
							月销量 {{item.monthnum}} 件
						</text>
						
					</view>
					<view class="f3">
						<text class="f31" style="font-size: 26rpx;">
							￥
						</text>
						<text class="f32" style="font-size: 38rpx;font-weight: bold;">
							{{item.price}}
						</text>
						<view class="f4" @click="to(`/pages/prodect/details?id=${item.id}&ctype=1`)">
							<text class="f33">
								立即购买
							</text>
							
						</view>
					</view>
				
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {getGoods} from "@/request/api/home.js"
	export default{
		props:["info"],
		data(){
			return{
				dataList:[]
			}
		},
		computed:{
			URL() {
				return (url) => {
					// if (!url) return require('@/static/logo.png')
					if (url && (url.includes(',') && !url.includes('base64'))) url = url.split(',')[0]
					return url ? ((url.includes('http') || url.includes('data:')) ? url : 'http://wg.fuliaoxx.com' + url) : ''
				}
			},
		},
		onShow() {
			console.log("5555")
		},
		watch:{
			"info":{
				handler(newval,oldval){
					if(newval.id){
						this.laodData()
					}
				},
				deep:true,
				immediate:true
			}
		},
		methods:{
			to(url, type) {
				console.log(url)
				if (type == 2) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
			emitsClose(){
				uni.$emit("vueData",{
					type:"closeGood"
				})
			},
			async laodData(){
				const {data} =await getGoods({
					user_id:this.info.id
				})
				this.dataList=data
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		border-radius: 20px 20px 0 0;
		width: 750rpx;
		position: fixed;
		z-index: 9999;
		bottom: 0px;
		height: 800rpx;
		padding: 12px;
		overflow-y: scroll;
		
	}

	.userInfo {
		flex-direction: row;
		align-items: center;
		.image {
			width: 100rpx;
			border-radius: 50%;
		}

		.f {
			margin-left: 10px;

			.text:nth-of-type(1) {
				font-weight: bold;
			}

			.text:nth-of-type(2) {
				color: #888;
				margin-top: -5px;
				font-weight: bold;
			}
		}
	}

	.goods {
		margin-top: 20px;
		.list {
			flex-direction: row;
			position: relative;
			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20px;
				margin-right: 12px;
			}
			.details{
				flex: 1;
				position: relative;
			}
			.f1{
				font-size: 38rpx;
				font-weight: 700;
			}
			.f2{
				// border: 1rpx solid #888;
				color: #888;
				font-weight: bold;
				border-radius: 8px;
			}
			.f3{
				flex-direction: row;
				position: absolute;
				bottom: 30rpx;
				width: 450rpx;
				height:80rpx;
				align-items: center;
				.f31,.f32{
					color: #e02a24;
				}
					
				.f32{
					font-size: 38rpx;
					font-weight: bolder;
				}
				.f4{
					position: absolute;
					right: 0px;
					background: #e22b2a;
					color: white;
					padding: 5px 12px;
					border-radius: 8px;
				}
				.f33{
					font-size: 26rpx;
					color: white;
				}
			}
		}
		
	}
	.close{
		position: absolute;
		right: 30px;
		top: 30px;
		// width: 100rpx;
		z-index: 9999;
		// height: 100rpx;
		color: red !important;
		transform: scale(2);
		
	}
</style>